Component({
  options: {
		multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties:{
    fs:{
      type:Number,
      value:98,
      observer:function(newVal,oldVal,change){
      }
    },
    cirle_x:{
      type:Number,
      value:0,
      observer:function(newVal,oldVal,change){
        
      }
    },
    cirle_y:{
      type:Number,
      value:0
    },
    cirle_r:{
      type:Number,
      value:0
    }
  },
  data:{

  },
  methods:{

    //画背景圆环
    createCanvas:function(id,x,y,r,fs){
      var n = 0;
      var timer = null;
      clearInterval(timer);
      timer = setInterval(()=>{

        var ctx=wx.createCanvasContext(id,this);
        ctx.setLineWidth(15);
        ctx.setStrokeStyle("#00d7bd");
        ctx.setLineCap('round');

        ctx.beginPath();
        ctx.arc(x,y,r,0,2*Math.PI,false);
        
        ctx.stroke();
        
        ctx.setLineWidth(15);
        

        ctx.setStrokeStyle("#ffffff");
        ctx.setLineCap('round');
        if(n<fs){
          n=n+10
          var p=n / 100;
          ctx.beginPath();
          
          ctx.arc(x,y,r,-90 * Math.PI / 180,(p*360 - 90)*Math.PI / 180,false);

          // 文字
          ctx.textAlign = "center";
          ctx.font = '15rpx Arial';
          ctx.fillStyle = "#fff";
          ctx.fillText('当前体征状态', x, y*1.3, 2*r);
    
          ctx.font = '30rpx Arial';
          ctx.fillStyle = '#ffffff';
          ctx.fillText(fs, x*0.9, y*1.1, 2*r);
    
          ctx.font = '25rpx Arial';
          ctx.fillStyle = "#ffffff";
          ctx.fillText('分', x*1.2,  y*1.07, 2*r);
          ctx.stroke();    //对当前路径进行描边
          ctx.draw();

        }else{
          clearInterval(timer)
        }

      },90)

    },

  },
  lifetimes:{
    attached:function(){

    },
    ready:function(){
      let that = this;
      wx.getSystemInfo({
          success: function( res ) {
              that.setData( {
                canvs_height: res.windowHeight/3
              });
          }
      });
      this.createCanvas('one',this.properties.cirle_x,this.properties.cirle_y,this.properties.cirle_r,this.properties.fs);

    }
  }
})
